<script setup lang="ts">

import {onMounted, inject, ref} from "vue";
import {Toast} from "vant";
import {useRouter, useRoute} from 'vue-router'
import {setAuthToken} from "../../utils/auth";
import myAxios from "../../plugins/myAxios.ts";

const router = useRouter()
const route = useRoute()
// 控制全局变量  是否展示 底部操作框
const globalVariable = inject<any>('globalVariable');
onMounted(async () => {
  globalVariable.value = false;
  document.body.style.backgroundColor = "#000000";
  document.body.style.color = "#FFFFFF";
  document.body.style.margin = "0";
  document.body.style.padding = "0";
})
const loginEvent = (value: any) => {
  console.log('用户登录信息' + JSON.stringify(value));

  myAxios.post('/user/login', {
    userAccount: value.userName,
    userPassword: value.userPassword,
  }).then(function (response) {
    let data = response.data;
    console.log('用户登录信息' + JSON.stringify(data));
    if (data.data != null && data.code == 200) {
      Toast.success('皇上英明~！');
    } else {
      return Toast.fail(data.message);
    }
    is_login.value = true
    setTimeout(() => {
      console.log('一秒后执行');
      Toast.success('上朝~！');
      setAuthToken(value.userName)
      router.push('/')
    }, 2000);
  }).catch(function () {
    return Toast.fail('臣妾做不到~！');
  });
}

const loginFrom = ref({
  userName: "admin",
  userPassword: "admin2024"
});
const is_login = ref(false);


</script>

<template>

  <!--ring div starts here-->
  <div class="ring" style="border: #1a1a1a; width: 200px; margin: 10% auto;">
    <i style="--clr:#00ff0a;"></i>
    <i style="--clr:#ff0057;"></i>
    <i style="--clr:#fffd44;"></i>
    <div class="login">
      <h2>Login</h2>
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="loginFrom.userName" label="账号" placeholder="请输入用户名"/>
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="loginFrom.userPassword" label="密码" placeholder="请输入密码"/>
      </van-cell-group>
      <div class="inputBx">
        <input type="submit" @click="loginEvent(loginFrom)" value="Sign in">
      </div>
      <van-loading v-show="is_login"/>
    </div>
  </div>
  <!--ring div ends here-->
</template>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;; /* 设置背景为黑色 */
  width: 50%;
  overflow: hidden;

}

.ring {
  position: relative;
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 153px;
}

.ring i {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  transition: 0.5s;
}

.ring i:nth-child(1) {
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  animation: animate 6s linear infinite;
}

.ring i:nth-child(2) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate 4s linear infinite;
}

.ring i:nth-child(3) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate2 10s linear infinite;
}

.ring:hover i {
  border: 6px solid var(--clr);
  filter: drop-shadow(0 0 20px var(--clr));
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.login {
  position: absolute;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.login h2 {
  font-size: 2em;
  color: #fff;
}

.login .inputBx {
  position: relative;
  width: 100%;
}

.login .inputBx input {
  position: relative;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 40px;
  font-size: 1.2em;
  color: #fff;
  box-shadow: none;
  outline: none;
}

.login .inputBx input[type="submit"] {
  width: 100%;
  background: #0078ff;
  background: linear-gradient(45deg, #ff357a, #fff172);
  border: none;
  cursor: pointer;
}

.login .inputBx input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.login .links {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.login .links a {
  color: #fff;
  text-decoration: none;
}

</style>